<template>
    <transition name="el-zoom-in-top">
        <div class="menu" v-if="RightMenuStatus" ref="rightMenu">
            <div class="menuItem text_green" v-if="RightMenuType == 'folder'" @click="menuClose('New')">
                <i class="el-icon-folder-add"></i>
                &nbsp;&nbsp; 新建文件夹
            </div>
            <div class="menuItem text_blue" v-if="RightMenuType == 'folder'" @click="menuClose('Rename')">
                <i class="el-icon-edit"></i>
                &nbsp;&nbsp; 编辑详情
            </div>
            <div class="menuItem text_blue" v-if="RightMenuType == 'doc'" @click="menuClose('SaveAs')">
                <i class="el-icon-document-copy"></i>
                &nbsp;&nbsp; 另存为
            </div>
            <div class="menuItem text_red" @click="menuClose('Delete')">
                <i class="el-icon-delete"></i>
                &nbsp;&nbsp; 删除
            </div>
        </div>
    </transition>
</template>

<script>
import { mapState } from "vuex";

export default {
    computed: {
        ...mapState("doc_tree", {
            RightMenuStatus: state => state.shellMenuSetting.status,
            RightMenuType: state => state.shellMenuSetting.type,
            RightMenuOption: state => state.shellMenuSetting.option,
            RightMenuObject: state => state.shellMenuSetting.object,
        }),
    },
    watch: {
        RightMenuStatus: function (newVal, oldVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.$refs.rightMenu.style.left = this.RightMenuOption.X + 'px';
                    if (this.RightMenuOption.Y > document.body.clientHeight - 200) {
                        this.$refs.rightMenu.style.bottom = (document.body.clientHeight - this.RightMenuOption.Y) + 'px';
                        this.$refs.rightMenu.style.top = 'auto';
                    } else {
                        this.$refs.rightMenu.style.top = this.RightMenuOption.Y + 'px';
                        this.$refs.rightMenu.style.bottom = 'auto';
                    };
                    document.addEventListener('click', this.clearRightMenu);
                });
            };
        },
    },
    methods: {
        clearRightMenu() {
            this.$store.dispatch('doc_tree/closeShellMenu');
            document.removeEventListener('click', this.clearRightMenu);
        },
        menuClose(text) {
            if (this.RightMenuType == 'folder') {
                if (text == 'New') {
                    this.$store.dispatch('doc_tree/setFolderEdit', {
                        value: this.RightMenuObject,
                        type: 'newFolder'
                    });
                } else if (text == 'Rename') {
                    this.$store.dispatch('doc_tree/setFolderEdit', {
                        value: this.RightMenuObject,
                        type: 'updateFolder'
                    });
                } else if (text == 'Delete') {
                    var confirm = this.$confirm('是否删除文件夹？');
                    if (confirm) {
                        this.$store.dispatch('doc_tree/deleteFolder');
                    };
                };
            } else if (this.RightMenuType == 'doc') {
                if (text == 'SaveAs') {
                    
                    // ActiveObject.optionSelect('SaveAs');
                } else if (text == 'Delete') {

                    // ActiveObject.optionSelect('Delete');
                };
            };
        },
    }
}
</script>

<style>

</style>